<template>
    <div>
      <div class="ff">
        <img class="jt" src="/static/dhw/dhw-5.png" alt="">
        <p class="zi">阿拉粉心得</p>
        <p></p>
      </div>
      <div class="xd">
        <p class="qbxd">全部心得</p>
        <p class="shuxian"></p>
        <router-link to="shaitu">
        <p>晒图</p>
        </router-link>
      </div>
      <div class="nicheng">
        <p class="nc"><img src="/static/fcxd/fcxd-1.png" alt="">昵称</p>
        <p class="nc">2017-06-28</p>
      </div>
      <p class="mk">该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价...</p>
      <div class="cz">
        <p class="k"><img src="/static/fcxd/fcxd-5.png" alt="">245</p>
        <p class="xian"></p>
        <p class="k"><img src="/static/fcxd/fcxd-6.png" alt="">199</p>
        <p class="xian"></p>
        <p class="k"><img src="/static/fcxd/fcxd-7.png" alt="">278</p>
      </div>
       <p class="tiao"></p>
      <div class="nicheng">
        <p class="nc"><img src="/static/fcxd/fcxd-1.png" alt="">昵称</p>
        <p class="nc">2017-06-28</p>
      </div>
      <p class="mk">该模块主要内容是顾客对购买的商品的评价...该模块主要内容是顾客对购买的商品的评价...</p>
        <div class="kuang">
          <img src="/static/fcxd/fcxd-2.png" alt="">
        </div>
      <div class="cz">
        <p class="k"><img src="/static/fcxd/fcxd-5.png" alt="">245</p>
        <p class="xian"></p>
        <p class="k"><img src="/static/fcxd/fcxd-6.png" alt="">199</p>
        <p class="xian"></p>
        <p class="k"><img src="/static/fcxd/fcxd-7.png" alt="">278</p>
      </div>
         <div class="dizuo">
           <router-link to="/swxq">
           <p class="jiazai">加载更多</p>
           </router-link>
         </div>
    </div>
</template>

<script>
    export default {
        name: "Xdxq"
    }
</script>

<style scoped>
  .ff{
    display:flex;
    justify-content: space-around;
    align-items: center;
    height: 9.6rem;
    background: #e53e42;
  }

  .zi{
    font-size: 4.8rem;
    color: #fff;
  }
  .jt{
    width: 2.2rem;
    height: 3.8rem;
  }
  .xd{
    display:flex;
    justify-content: space-around;
    align-items: center;
    height: 8.1rem;
    /*background: aqua;*/
    font-size: 3rem;
    border-bottom: 1px solid #ccc;
  }
  .shuxian{
    width: 0.2rem;
    height: 6rem;
    background: #ccc;
  }
  .qbxd{
    color: #e53e42;
  }
  .nicheng{
    width: 68rem;
    height: 24rem;
    display:flex;
    justify-content: space-between;
    margin-left: 2rem;
  }
.nc{
  margin-top: 2rem;
}
  .mk{
    height: 6rem;
    margin-top: -14rem;
    font-size: 2.4rem;
    color: #ccc;
    margin-left: 2rem;
  }
  .cz{
    border-top: 1px solid #ccc;
    display:flex;
    justify-content: space-around;
    align-items: center;
    font-size: 2.4rem;
  }
  .xian{
    width: 0.2rem;
    height: 4rem;
    background: #ccc;
    margin-top: 1rem;
  }
.k{
  margin-top: 1rem;
}
  .tiao{
    height: 2rem;
    margin-top: 2.3rem;
    margin-bottom: 2.3rem;
    background: #ccc;
  }
  .kuang{
    width: 26rem;
    height: 20rem;
    text-align: center;
    border: 1px solid #ccc;
    margin-bottom: 2.4rem;
  }
.dizuo{
  width: 72rem;
  height: 22rem;
  margin-top: 2rem;
  background: #ccc;
}
.jiazai{
  font-size: 2.4rem;
  text-align: center;
  padding-top: 20rem;
}
</style>
